import React from 'react';
import { Form, Input, Modal, Button, Radio, Select } from 'antd';
import PropTypes from 'prop-types';
import { arrayToTree } from 'utils';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;

@Form.create()
class CreateRoleForm extends React.Component {
  static propTypes = {
    roles: PropTypes.array.isRequired,
    form: PropTypes.object.isRequired,
    visible: PropTypes.bool.isRequired,
    handleCancel: PropTypes.func.isRequired,
    handleSubmit: PropTypes.func.isRequired,
  }

  state = {
    kind: 'role',
  }

  _changeKind = (e) => {
    this.setState({
      kind: e.target.value,
    });
  }

  _generateSelectOptions = () => {
    const { roles } = this.props;
    const rolesTree = arrayToTree(roles, 'ID', "GroupID", "children").filter(_ => (_.GroupID ? _.GroupID !== "" : true));
    console.log(rolesTree, '=====');
    return rolesTree.map(_ => <Option value={_.ID} key={_.ID} >{_.GroupName}</Option>);
  }

  _handleSubmit = () => {
    const { handleSubmit, handleCancel, form: { validateFieldsAndScroll, resetFields } } = this.props;
    validateFieldsAndScroll((err, values) => {
      // console.log(values);
      if (!err) {
        // console.log('Received values of form: ', values);
        values.kind = this.state.kind;
        handleSubmit(values);
        resetFields();
        handleCancel();
      }
    });
  }

  render () {
    const {
      visible,
      form: {
        getFieldDecorator,
      },
      handleCancel,
    } = this.props;

    return (
      <Form>
        <Modal
          title={'新增角色/角色组'}
          visible={visible}
          onOk={this._handleSubmit}
          onCancel={handleCancel}
          footer={
            [
              <Button key="cancel" onClick={handleCancel}>取消</Button>,
              <Button key="submit" type="primary" onClick={this._handleSubmit}>提交</Button>,
            ]
          }
        >
          <Radio.Group value={this.state.kind} onChange={this._changeKind} style={{ marginBottom: 16 }}>
            <Radio.Button value="role">角色</Radio.Button>
            <Radio.Button value="group">角色组</Radio.Button>
          </Radio.Group>

          { 
            this.state.kind === 'role' ? <div>
              <FormItem
                label="所在组"
              >
                {
                  getFieldDecorator('groupID', {
                    rules: [{ required: true, message: '请选择角色组', whitespace: true }],
                  })(<Select
                    style={{ width: 200 }}
                    placeholder="选择一个角色组"
                  >
                    {this._generateSelectOptions()}
                  </Select>)
                }
              </FormItem>
              

              <FormItem
                label="角色名称"
              >
                {
                  getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入职位名称', whitespace: true }],
                  })(<Input />)
                }
              </FormItem>
            </div> : null
          }

          { this.state.kind === 'group' ? <div>
            <FormItem
              label="角色组"
            >
              {
                getFieldDecorator('groupName', {
                  rules: [{ required: true, message: '请输入组名称', whitespace: true }],
                })(<Input />)
              }
            </FormItem>

            <FormItem
              label="组说明"
            >
              {
                getFieldDecorator('groupDescription', {
                  rules: [{ required: false }],
                })(<TextArea rows={4} />)
              }
            </FormItem>
          </div> : null
          }
        </Modal>
        
      </Form>
    );
  }
}

export default CreateRoleForm;
